<template>
  <div>
    <div>
      <hr style="margin-top:127px">
      <div class="wrapper">
        <h2>个人中心</h2>
        <div class="personal-box">
          <div class="personal-left">
            <ul class="perleftul">
              <li>
                <img
                  src=""
                  alt
                  class="personal-img"
                >
              </li>
              <li @click="iscomponent='wdzl'" :class="{active:iscomponent=='wdzl'}">
                <span class="icon"></span>我的资料
              </li>
              <li @click="iscomponent='dzgl'" :class="{active:iscomponent=='dzgl'}">
                <span class="icon icon2"></span>地址管理
              </li>
              <li @click="iscomponent='wddd'" :class="{active:iscomponent=='wddd'}">
                <span class="icon icon3"></span>我的订单
              </li>
              <li @click="iscomponent='gwc'" :class="{active:iscomponent=='gwc'}">
                <span class="icon icon4"></span>购物车
              </li>
            </ul>
          </div>
          <div class="personal-right">
            <component :is="iscomponent"></component>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import WDZL from './wdzl'
import WDDD from './wddd'
import DZGL from './dzgl'
export default {
    components:{
        wdzl:WDZL,
        wddd:WDDD,
        dzgl:DZGL

    },
    data(){
      return {
        iscomponent:"wdzl"
      }
      
    }
  
};
</script>
<style  scoped>
.wrapper {
  width: 1200px;
  margin: 0 auto;
}
h2 {
  font-size: 24px;
  line-height: 84px;
}
.personal-left,
.personal-right {
  height: 536px;
  float: left;
}
.personal-right {
  width: 948px;
  background-color: #f2f2f2;
  padding-left: 83px;
}

.personal-left {
  background-color: #b49d7e;
  width: 252px;
  padding-left: 83px;
}
.personal-img {
  width: 84px;
  height: 84px;
  border-radius: 50%;
}

ul {
  padding: 6px 0 0 0;
}
.perleftul li {
  position:relative;
  padding: 14px 0;
  color:#fff;
  list-style: none;
}
.perleftul li.active:after{
  content:"";
  display:block;
  position:absolute;
  width:0px;
  height:0px;
  border:transparent 10px solid;
  border-right:  #fff 10px solid;
  right:0px;
  top:20px;
}
.icon{
    padding:0 10px;
    margin-right:10px;
    background:url('../../assets/icon/sprite2.png') -69px 0;
}
.icon2{
    background-position: 0px -19px;
}
.icon3{
    background-position: -34px -26px;
}
.icon4{
    background-position: -35px 0px;
}
</style>
